<template>
  <el-dialog
    :title="dataForm.id ? '修改' : '新增'"
    :close-on-click-modal="true"
    v-model="visible"
    width="80%"
    destroy-on-close
  >
    <el-form
      ref="dataForm"
      :model="dataForm"
      :rules="dataRule"
      label-width="120px"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="杯赛名称" prop="tenantName">
            <el-input v-model="dataForm.tenantName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联赛编码" prop="leagueCode">
            <el-input v-model="dataForm.leagueCode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边队伍" prop="leftTeamId">
            <el-select
              v-model="dataForm.leftTeamId"
              filterable
              placeholder="左边队伍"
              clearable
              :style="{ width: '100%' }"
              @change="changeTeam($event, 'left')"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边队伍" prop="rightTeamId">
            <el-select
              v-model="dataForm.rightTeamId"
              filterable
              placeholder="右边队伍"
              clearable
              :style="{ width: '100%' }"
              @change="changeTeam($event, 'right')"
            >
              <el-option
                v-for="item in teamList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边队伍LOGO" prop="leftTeamLogo">
            <img
              :src="dataForm.leftTeamLogo"
              width="63"
              height="91"
              v-if="dataForm.leftTeamLogo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边队伍LOGO" prop="rightTeamLogo">
            <img
              :src="dataForm.rightTeamLogo"
              width="63"
              height="91"
              v-if="dataForm.rightTeamLogo"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边队伍得分" prop="leftTeamScore">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.leftTeamScore"
              placeholder="左边队伍得分"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边队伍得分" prop="rightTeamScore">
            <el-input-number
              v-model="dataForm.rightTeamScore"
              placeholder="右边队伍得分"
              :style="{ width: '100%' }"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="左边小局计分" prop="leftTeamPoints">
            <el-input-number
              type="number"
              :min="0"
              :style="{ width: '100%' }"
              v-model="dataForm.leftTeamPoints"
              placeholder="左边小局计分"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="右边小局计分" prop="rightTeamPoints">
            <el-input-number
              v-model="dataForm.rightTeamPoints"
              placeholder="右边小局计分"
              :style="{ width: '100%' }"
              :min="0"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛状态" prop="matchStatus">
            <el-select
              v-model="dataForm.matchStatus"
              placeholder="比赛状态"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in matchStatusData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛类型" prop="matchTag">
            <el-select
              v-model="dataForm.matchTag"
              filterable
              placeholder="比赛类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in matchTagData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛日期" prop="matchDate">
            <el-date-picker
              v-model="dataForm.matchDate"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              :style="{ width: '100%' }"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="比赛时间" prop="matchTime">
            <el-input
              v-model="dataForm.matchTime"
              placeholder="比赛时间"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否发布" prop="enableFlag">
            <el-switch
              v-model="dataForm.enableFlag"
              :active-value="1"
              :inactive-value="0"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否开启直播" prop="liveFlag">
            <el-switch
              v-model="dataForm.liveFlag"
              active-value="Y"
              inactive-value="N"
              :style="{ width: '100%' }"
            >
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="dataForm.liveFlag === 'Y'">
          <el-form-item label="直播链接地址" prop="matchLiveUrl">
            <el-input
              v-model="dataForm.matchLiveUrl"
              placeholder="直播链接地址"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12" v-if="type === 'edit'">
          <el-form-item label="Rounds" prop="rounds">
            <el-select
              v-model="dataForm.rounds"
              filterable
              placeholder="Rounds"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in roundsData"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="type === 'edit'">
          <el-button type="primary" @click="dataFormSubmit()"
            >保存基本信息</el-button
          >
          <br />
        </el-col>
        <el-col :span="24" v-if="type === 'edit'">
          <el-form-item label="地图比分信息" prop="rightPenaltyKick">
          </el-form-item>
        </el-col>
        <el-col :span="2" v-if="type === 'edit'">
          <el-button
            type="primary"
            @click="dataFormSubmitMapAll()"
            :style="{ marginBottom: '10px' }"
            >保存所有地图信息</el-button
          >
        </el-col>
        <el-col :span="24" v-if="type === 'edit'">
          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="地图一" name="1">
              <Map
                ref="mapForm1"
                :key="1"
                :mapFormInit="matchInfo1"
                :activeName="activeName"
                :mapList="mapList"
                :matchTeamsList="matchTeamsList"
                :teamList="teamList"
              />
            </el-tab-pane>
            <el-tab-pane label="地图二" name="2">
              <Map
                ref="mapForm2"
                :key="2"
                :mapFormInit="matchInfo2"
                :activeName="activeName"
                :mapList="mapList"
                :matchTeamsList="matchTeamsList"
                :teamList="teamList"
              />
            </el-tab-pane>
            <el-tab-pane label="地图三" name="3">
              <Map
                ref="mapForm3"
                :key="3"
                :mapFormInit="matchInfo3"
                :activeName="activeName"
                :mapList="mapList"
                :matchTeamsList="matchTeamsList"
                :teamList="teamList"
              />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <span class="dialog-footer" v-if="type === 'add'">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { request } from "@/utils/axios-util";
import { matchStatusData, matchTagData, roundsData } from "./config";
import Map from "./components/map.vue";

export default {
  components: {
    Map,
  },
  data() {
    return {
      visible: false,
      matchStatusData,
      matchTagData,
      roundsData,
      dataForm: {
        tenantName: "",
        leagueCode: "",
        enableFlag: 0,
        liveFlag: "N",
        rounds: "BO3",
      },
      dataRule: {
        leftTeamId: [
          { required: true, message: "左边队伍不能为空", trigger: "change" },
        ],
        rightTeamId: [
          { required: true, message: "右边队伍不能为空", trigger: "change" },
        ],
        matchStatus: [
          { required: true, message: "比赛状态不能为空", trigger: "change" },
        ],
        matchTag: [
          { required: true, message: "比赛类型不能为空", trigger: "change" },
        ],
        matchDate: [
          { required: true, message: "比赛日期不能为空", trigger: "change" },
        ],
        matchTime: [
          { required: true, message: "比赛时间不能为空", trigger: "change" },
        ],
        enableFlag: [
          { required: true, message: "是否发布不能为空", trigger: "change" },
        ],
        liveFlag: [
          {
            required: true,
            message: "是否开启直播不能为空",
            trigger: "change",
          },
        ],
      },
      id: "",
      teamList: [],
      matchTeamsList: [],
      mapList: [],
      tenantNameInit: "南美洲新星联赛",
      leagueCodeInit: "SARS2024S01",
      tenantIdInit: 4,
      activeName: "1",
      type: "",
    };
  },
  mounted() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.leagueCodeInit = userInfo.leagueCode;
    this.tenantNameInit = userInfo.tenantName;
    this.tenantIdInit = userInfo.tenantId;
    this.getTeamList();
  },
  computed: {
    matchInfo1() {
      if (
        this.dataForm.matchInfoList &&
        this.dataForm.matchInfoList.length > 0
      ) {
        const obj = this.dataForm.matchInfoList.find((e) => e.matchSort === 1);
        if (obj) {
          return { ...obj };
        }
      }
      return {};
    },
    matchInfo2() {
      if (
        this.dataForm.matchInfoList &&
        this.dataForm.matchInfoList.length > 0
      ) {
        const obj = this.dataForm.matchInfoList.find((e) => e.matchSort === 2);
        if (obj) {
          return { ...obj };
        }
      }
      return {};
    },
    matchInfo3() {
      if (
        this.dataForm.matchInfoList &&
        this.dataForm.matchInfoList.length > 0
      ) {
        const obj = this.dataForm.matchInfoList.find((e) => e.matchSort === 3);
        if (obj) {
          return { ...obj };
        }
      }
      return {};
    },
  },
  methods: {
    init(id) {
      this.id = id;
      const userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.leagueCodeInit = userInfo.leagueCode;
      this.tenantNameInit = userInfo.tenantName;
      this.tenantIdInit = userInfo.tenantId;
      if (id) {
        this.type = "edit";
        request("/admin/match/get", { id }, "GET").then(
          (res) => {
            if (res.code === 200) {
              this.dataForm = res.data;
              this.dataForm.tenantName = this.tenantNameInit;
              this.dataForm.tenantId = this.tenantIdInit;
            } else {
              this.$message.error(res.message);
            }
          },
          (resp) => {
            this.$message.error("数据获取失败，", resp);
          }
        );
        this.getMapList();
        this.getMatchTeamsList();
      } else {
        this.type = "add";
        this.dataForm = {
          tenantName: "",
          leagueCode: "",
          enableFlag: 0,
          liveFlag: "N",
          rounds: "BO3",
        };
        this.dataForm.leagueCode = this.leagueCodeInit;
        this.dataForm.tenantName = this.tenantNameInit;
        this.dataForm.tenantId = this.tenantIdInit;
      }
      this.visible = true;
    },
    changeTeam(e, type) {
      let obj = { name: "", logoUrl: "" };
      if (e) {
        obj = this.teamList.find((item) => item.id == e);
      }

      this.dataForm = {
        ...this.dataForm,
        [`${type}TeamName`]: obj.name,
        [`${type}TeamLogo`]: obj.logoUrl,
      };
    },
    // 获取队伍信息
    getTeamList() {
      request(
        "/portal/leagueInfo/teamInfo?leagueCode=" + this.leagueCodeInit,
        {},
        "GET"
      ).then(
        (res) => {
          if (res.code === 200) {
            this.teamList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },

    // 获取地图信息
    getMapList() {
      request(
        "/admin/match/getMapList?leagueCode=" +
          this.leagueCodeInit +
          "&tenantId=" +
          this.tenantIdInit,
        {},
        GET
      ).then(
        (res) => {
          if (res.code === 200) {
            this.mapList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 获取参赛队伍信息
    getMatchTeamsList() {
      request("/admin/match/getMatchTeams?id=" + this.id, {}, "GET").then(
        (res) => {
          if (res.code === 200) {
            this.matchTeamsList = res.data;
          } else {
            this.$message.error(res.msg);
          }
        },
        (resp) => {
          this.$message.error("数据获取失败，", resp);
        }
      );
    },
    // 更新基础数据
    dataFormSubmit(type) {
      const data = {
        ...this.dataForm,
        historyFlag: 0,
      };
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          const url =
            type === "all"
              ? "/admin/match/update"
              : "/admin/match/saveMatchBaseInfo";
          request(url, data, "POST").then(
            (res) => {
              if (res.code === 200) {
                this.$message.success("操作成功");
                if (!this.id || type === "all") {
                  this.visible = false;
                  $emit(this, "refreshDataList");
                }
              } else {
                this.$message.error(res.msg);
              }
            },
            (resp) => {
              this.$message.error("操作失败，", resp);
            }
          );
        }
      });
    },
    dataFormSubmitMapAll() {
      const aa1 = this.$refs.mapForm1.mapForm;
      const aa2 = this.$refs.mapForm2.mapForm;
      const aa3 = this.$refs.mapForm3.mapForm;
      this.dataForm.matchInfoList[0] = { ...aa1 };
      this.dataForm.matchInfoList[1] = { ...aa2 };
      this.dataForm.matchInfoList[2] = { ...aa3 };
      this.dataFormSubmit("all");
    },
  },
  emits: ["refreshDataList"],
};
</script>
